import React from 'react'
import classNames from 'classnames'
import { AutoCenter } from '../AutoCenter'
import { CenterPopup } from '../CenterPopup'
import { Image } from '../Image'
import { DialogActionButton } from './dialogActionButton'
import type { DialogProps, Action } from './type'

const cls = (name = '') => `rt-dialog${name && '-'}${name}`

export const Dialog: React.FC<DialogProps> = (props) => {
  const {
    'aria-label': ariaLabel,
    afterClose,
    afterShow,
    actions = [] as Action[],
    bodyClassName,
    bodyStyle,
    className,
    closeOnAction = false,
    closeOnMaskClick = false,
    content,
    destroyOnClose = false,
    forceRender = false,
    getContainer = null,
    header,
    image,
    maskClassName,
    maskStyle,
    onAction,
    onClose,
    style,
    stopPropagation = ['click'],
    title,
    visible,
  } = props

  const element = (
    <>
      {!!image && (
        <div className={cls('image-container')}>
          <Image src={image} alt="dialog header image" width="100%" />
        </div>
      )}
      {!!header && (
        <div className={cls('header')}>
          <AutoCenter>{header}</AutoCenter>
        </div>
      )}
      {!!title && <div className={cls('title')}>{title}</div>}
      <div
        className={classNames(
          cls('content'),
          !content && cls('content-empty'),
        )}
      >
        {typeof content === 'string' ? (
          <AutoCenter>{content}</AutoCenter>
        ) : (
          content
        )}
      </div>
      <div className={cls('footer')}>
        {actions.map((row, index) => {
          const innerActions = Array.isArray(row) ? row : [row]
          return (
            // eslint-disable-next-line react/no-array-index-key
            <div className={cls('action-row')} key={String(index)}>
              {innerActions.map((action, innerIndex) => (
                <DialogActionButton
                  key={action.key}
                  action={action}
                  onAction={async () => {
                    await Promise.all([
                      action.onClick?.(),
                      onAction?.(action, innerIndex),
                    ])
                    if (closeOnAction) {
                      onClose?.()
                    }
                  }}
                />
              ))}
            </div>
          )
        })}
      </div>
    </>
  )

  return (
    <CenterPopup
      aria-label={ariaLabel}
      afterClose={afterClose}
      afterShow={afterShow}
      bodyStyle={bodyStyle}
      bodyClassName={classNames(
        cls('body'),
        image && cls('with-image'),
        bodyClassName,
      )}
      className={classNames(cls(), className)}
      destroyOnClose={destroyOnClose}
      forceRender={forceRender}
      getContainer={getContainer}
      maskStyle={maskStyle}
      maskClassName={maskClassName}
      onMaskClick={
        closeOnMaskClick
          ? () => {
            onClose?.()
          }
          : undefined
      }
      role="dialog"
      style={style}
      stopPropagation={stopPropagation}
      visible={visible}
    >
      {element}
    </CenterPopup>
  )
}
